import React, { Component } from 'react';

import { connect } from 'react-redux';

import {
  withRouter
} from 'react-router-dom';

import {
  Badge
} from 'antd-mobile';

import './tabbar.less';

const mapState = state => {
  return {
    totalCount: state.cart.list.reduce((result, item)=>{
      result += item.count;
      return result;
    }, 10)
  }
}

@withRouter
@connect(mapState)

export default class Tabbar extends Component {
  onItemClick = (path) => {
    this.props.history.push(path);
  }
  // getIcon = (path)=> {
  //   switch(path){
  //     case '/home':
  //       return <span className='icon'>&#xe666;</span>;
  //     case '/mall':
  //       return <span className='icon'>&#xe6b3;</span>;
  //     case '/cart':
  //       return <span className='icon'>&#xe679;</span>;
  //     case '/mine':
  //       return <span className='icon'>&#xe65e;</span>;
  //     default:
  //       break;
  //   }
  // }
  render() {
    const currentPath = this.props.location.pathname;
    return (
      <div className='wgd-tabbar'>
        {
          this.props.routes.map(route =>{
            const cls = route.path === currentPath ? 'wgd-tabbar-item active' : 'wgd-tabbar-item';
            return (
              <div 
                key={route.path} 
                className={cls}
                onClick={this.onItemClick.bind(this, route.path)}
              >
                {
                  route.path === '/cart' 
                  ?
                  <Badge text={this.props.totalCount} overflowCount={99} size='large'>
                    <span className='icon' dangerouslySetInnerHTML={{__html: route.icon}} />
                  </Badge>
                  :
                  <span className='icon' dangerouslySetInnerHTML={{__html: route.icon}} />
                }
                {/*{this.getIcon(route.path)}*/}
                <span className='text'>{route.title}</span>
              </div>
            )
          })
        }
      </div>
    )
  }
}
